﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行/待办 <span id="todoCount"></span></h2>
        <ol id="todoList" class="demo-box">
            <!-- <li><input type='checkbox'>
                <p>测试</p> <a href='javascript:;'></a>
            </li> -->
        </ol>
        <h2>已经完成 <span id="doneCount"></span></h2>
        <ul id="doneList">
            <!-- <li><input type='checkbox' checked=true style=" pointer-events: none;">
                <p>吃饭</p><a href='javascript:;'></a>
            </li> -->
        </ul>
    </section>
    <footer>

    </footer>

    <script>
        const inputAdd = document.querySelector('#title');
        const todoList = document.querySelector('#todoList');
        const todoCount = document.querySelector('#todoCount');
        const doneList = document.querySelector('#doneList');
        const doneCount = document.querySelector('#doneCount')
        let listData;
        // console.log(inputAdd, todoList, doneList);
        // let todoListL = [], todoCountL, doneListL = [], doneCountL;
        //页面加载的时候,获取本地存储的数据,对四个模块进行渲染

        //用于生成唯一ID的方法
        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0,
                    v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
        // guid() // "a1ca0f7b-51bd-4bf3-a5d5-6a74f6adc1c7"

        //渲染页面
        function showList() {
            //根据从本地取得的数据对页面进行渲染
            //先清空
            todoList.innerHTML = '';
            doneList.innerHTML = '';
            listData.todoList.forEach(item => {
                const todoLi = document.createElement('li');
                todoLi.innerHTML = `<input type='checkbox' data-id=${item.id}>
                <p>${item.value}</p> <a href='javascript:;' data-id=${item.id}></a>`;
                todoList.appendChild(todoLi);
            });
            listData.doneList.forEach(item => {
                const doneLi = document.createElement('li');
                doneLi.innerHTML = `<input type='checkbox' checked=true  data-id=${item.id}>
                <p>${item.value}</p><a href='javascript:;' data-id=${item.id}></a>`;
                doneList.appendChild(doneLi);
            });
            todoCount.innerHTML = listData.todoList.length;
            doneCount.innerHTML = listData.doneList.length;
        }

        //window加载时初始化并渲染
        window.addEventListener('load', function () {
            listData = JSON.parse(localStorage.getItem('listData'));
            //解构赋值
            // { todoListL, todoCountL, doneListL, doneCountL } = listData;

            //如果没有事件,就将其初始化,并存入本地
            if (!listData) {
                listData = {
                    todoList: [],
                    // todoCount: 0,
                    doneList: [],
                    // doneCount: 0,
                }
                localStorage.setItem('listData', JSON.stringify(listData));
            }
            showList();
        })

        //添加新待办
        inputAdd.addEventListener('keyup', function (e) {
            //按下回车,将数据提交给todoList
            if (e.keyCode == '13' && this.value) {
                // const todoThing = this.value;
                // console.log(todoThing);
                const id = guid();  //生成一个随机唯一id
                // const todoLi = document.createElement('li');
                // todoLi.innerHTML = `<input type='checkbox'>
                // <p>${this.value}</p> <a href='javascript:;' data-id=${id}></a>`;
                // todoList.appendChild(todoLi);
                listData.todoList.push({ value: this.value, id: id }); //本地数据++
                // listData.todoCount++;
                todoCount.innerHTML = listData.todoList.length;
                //存储到本地
                localStorage.setItem('listData', JSON.stringify(listData));
                this.value = '';
                //重新渲染
                showList();
            }
        });

        //点击删除代办的删除按钮(事件委托)
        todoList.addEventListener('click', function (e) {
            //判断点击的是不是a
            if (e.target.tagName === 'A') {
                //获取当前要删除的代办的id
                const id = e.target.dataset.id;
                // console.log(id);
                //删除listData中相应的todoList对象
                //找到所在下标
                const delIndex = listData.todoList.findIndex(item => {
                    return item.id === id;
                });
                // console.log(delIndex);
                //删除对应的对象
                listData.todoList.splice(delIndex, 1);
                //重新存储到本地
                localStorage.setItem('listData', JSON.stringify(listData));
                //重新渲染页面
                showList();
            }
        })

        //点击完成,将代办改为已完成(事件委托)
        todoList.addEventListener('click', function (e) {
            if (e.target.tagName === 'INPUT') {
                //获取当前点击的id 和value
                const id = e.target.dataset.id;
                const value = listData.todoList.find(item => item.id === id).value;
                // console.log(id, value);

                //doneList新增
                listData.doneList.push({ id: id, value: value });
                //todoList删除
                listData.todoList.splice(listData.todoList.findIndex(item => item.id === id), 1);
                //存储到本地
                localStorage.setItem('listData', JSON.stringify(listData));
                //重新渲染
                showList();
            }
        });

        //完成列表删除某一项(事件委托)
        doneList.addEventListener('click', function (e) {
            //判断点击的是不是a
            if (e.target.tagName === 'A') {
                //获取当前要删除的代办的id
                const id = e.target.dataset.id;
                // console.log(id);
                //删除listData中相应的todoList对象
                //找到所在下标
                const delIndex = listData.doneList.findIndex(item => {
                    return item.id === id;
                });
                // console.log(delIndex);
                //删除对应的对象
                listData.doneList.splice(delIndex, 1);
                //重新存储到本地
                localStorage.setItem('listData', JSON.stringify(listData));
                //重新渲染页面
                showList();
            }
        });

        //完成列表的改为代办(事件委托)
        doneList.addEventListener('click', function (e) {
            if (e.target.tagName === 'INPUT') {
                //获取当前点击的id 和value
                const id = e.target.dataset.id;
                const value = listData.doneList.find(item => item.id === id).value;
                // console.log(id, value);

                //doneList新增
                listData.todoList.push({ id: id, value: value });
                //todoList删除
                listData.doneList.splice(listData.doneList.findIndex(item => item.id === id), 1);
                //存储到本地
                localStorage.setItem('listData', JSON.stringify(listData));
                //重新渲染
                showList();
            }
        })
    </script>
</body>

</html>